<template>
    <div class="index web-inner">
        <div class="index-inner">
            <div class="index-left">
                <div class="title">
                    <span class="title-left">開店+專題報道</span>
                </div>
                <div class="news-detail">
                    <div class="news-detail-title">
                        {{pageContent.subject}}
                    </div>
                    <div class="news-detail-tips">
                        [開店+專題報道]
                    </div>
                    <img :src="newsImg+pageContent.image" v-if="pageContent.image" alt="">
                    <div class="news-detail-content" v-html="pageContent.content"></div>
                </div>
            </div>
            <div class="index-right">
                <div class="big-yuanfen big-link-image fangda">
                    <a :href="h2.link">
                        <img :src="imgUrl+h2.image" alt="">
                    </a>
                </div>
                <div class="xuqiu">
                    <indexXuqiu></indexXuqiu>
                </div>
                <div v-for="(item,index) in h3" class="yuanfen fangda">
                    <a :href="item.link">
                        <img :src="imgUrl+item.image" alt="">
                    </a>
                </div>
                <div class="baodao">
                    <indexBaodao></indexBaodao>
                </div>
                <!--<div class="news">-->
                <!--<indexNews></indexNews>-->
                <!--</div>-->
            </div>
        </div>

        <!--<div class="common-bottom fangda">-->
            <!--<a :href="bottomImg.link">-->
                <!--<img :src="imgUrl+bottomImg.image" alt="">-->
            <!--</a>-->
        <!--</div>-->
        <!--<div class="fodong">-->
            <!--<a href="#/kandeng" class="btn1">-->
                <!--<img src="../../static/img/fudong1.png" alt="">-->
            <!--</a>-->
            <!--<div class="btn2">-->
                <!--<img src="../../static/img/fodong2.png" alt="">-->
                <!--<img src="../../static/img/fudong3.png" alt="">-->
                <!--<a href="http://nav.cx/hXKkUnJ">-->
                    <!--<img src="../../static/img/fudong4.png" alt="">-->
                <!--</a>-->
            <!--</div>-->
        <!--</div>-->
    </div>
</template>

<script>
  import lunbo from "../components/swiper-lunbo"
  import ad from "../components/swiper-ad"
  import indexTab from "../components/index-tab"
  import indexXuqiu from "../components/index-xuqiu"
  import indexBaodao from "../components/index-baodao"
  import indexNews from "../components/index-news"
  import qs from 'qs';

  export default {
    name: 'home',
    components:{
      lunbo,
      ad,
      indexTab,
      indexXuqiu,
      indexBaodao,
      indexNews
    },
    data() {
      return {
        id:this.$route.params.id,
        meishi:[
          {
            title:"美食品牌",
          },
          {
            title:"特色小吃",
            id:2
          },
          {
            title:"火鍋燒烤",
            id:4
          },
          {
            title:"異國美食",
            id:5
          },
        ],
        dianxin:[
          {
            title:"咖啡冰品",
          },
          {
            title:"咖啡茶飲",
            id:1
          },
          {
            title:"甜點冰品",
            id:3
          }
        ],
        jineng:[
          {
            title:"技能服務",
          },
        ],
        drink:[],
        food:[],
        h1:"",
        h2:"",
        h3:[],
        imgList:[],
        bottomImg:"",
        bestbrand:[],
        hotbrand:[],
        skill:[],
        pageContent:[],
      }
    },
    mounted() {
      this.getImg()
      this.getBrandSublist()
      this.changePage()
    },
    methods:{
      changePage() {
        this.$http({
          method:"get",
          url: this.API.get_news_detail+"?news_id="+this.id,
        }).then((res) => {
          if(res.status ===200 && res.data){
            this.pageContent = res.data[0];
          }
        })
      },
      go(item) {
        this.$store.commit ("setKeyWord",item);
        window.location.href="#/pageDetail"
      },
      getImg() {
        this.$http.post(this.API.get_banner_home).then((res) => {
          let $this = this;
          console.log(res);
          if(res.status ===200 && res.data.length>0){
            res.data.forEach((item) => {
              if(item.location==="h1"){
                this.h1=item;
              }
              if(item.location==="h2"){
                this.h2=item;
              }
              if(item.location==="h3"){
                this.h3.push(item);
              }
              if(item.location==="h0"){
                this.imgList.push(item);
              }
              if(item.location==="h4"){
                this.bottomImg=item;
              }
            })
          }
        })
      },
      getBrandSublist() {
        this.$http.post(this.API.get_homepage_brand).then((res) => {
          let $this = this;
          if(res.status ===200 && res.data.bestbrand){
            this.bestbrand = this.Utils.sliceArr(res.data.bestbrand,4)
          }
          if(res.status ===200 && res.data.hotbrand){
            this.hotbrand = this.Utils.sliceArr(res.data.hotbrand,4)
          }
          if(res.status ===200 && res.data.drink){
            this.drink = this.drink.concat(res.data.drink.icedrink)
            this.drink = this.drink.concat(res.data.drink.coffee)
          }
          if(res.status ===200 && res.data.food){
            this.food = this.food.concat(res.data.food.chinesefood)
            this.food = this.food.concat(res.data.food.hotpot)
            this.food = this.food.concat(res.data.food.overseafood)
          }
          if(res.status ===200 && res.data.skill){
            this.skill = this.skill.concat(res.data.skill.skill)
          }
        })
      },
    },
    watch:{
      $route:function (n, o) {
        this.id=this.$route.params.id
        this.changePage()
      }
    }
  }
</script>
<style lang="less" scoped>
    @import "../style/base";
    .news-page{
        margin-top: 20px;
    }
    .title{
        height: 48px;
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        border-bottom: 4px solid #2e436d;
        margin-bottom: 15px;
        .title-left{
            padding:  0 18px;
            height: 48px;
            line-height: 48px;
            font-size: 24px;
            background-color:#2e436d;
            color: #ffffff;
        }
        .title-right{
            cursor: pointer;
            font-size: 16px;
            line-height: 16px;
            padding: 5px;
            color: gray;
            border: 1px solid gray;
        }
    }
    .pagenation{
        width: 300px;
        margin: 10px auto;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
    }
    .main-item{
        box-sizing: border-box;
        padding:10px;
        background-color: #ffffff;
        width: 100%;
        font-size: 12px;
        color: gray;
        display: flex;
        flex-direction: column;
        align-items: center;
        cursor: pointer;
        border-bottom: 1px dashed #e6e6e6;
        span{
            width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .item-title{
            color:  #7d3e03;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    }
    .index{
        margin: 0 auto;
        padding:  40px 0 0;

        a{
            color: #000000;
        }
        .index-inner{
            width: 100%;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
        }
        .index-left{
            width: 70%;
            margin-right: 5%;
            .big-lunbo{
                width: 100%;
                height: 386px;
                margin-bottom: 32px;
                position: relative;

            }
            .tuijian{
                /*height: 250px;*/
                width: 100%;
                margin-bottom: 25px;
            }
            .tab{
                width: 100%;
                margin-bottom: 25px;
            }
        }
        .index-right{
            width:29.5%;
            .big-yuanfen{
                height: 386px;
                width: 100%;
                margin-bottom: 42px;
                a{
                    display: inline-block;
                    width: 100%;
                    height: 100%;
                    overflow: hidden;
                    img{
                        width: 100%;
                    }
                }
            }
            .xuqiu{
                width: 100%;
                box-sizing: border-box;
                margin-bottom: 45px;
            }
            .yuanfen{
                width: 100%;
                /*height:100px;*/
                margin-bottom: 45px;
                cursor: pointer;
                img{
                    width: 100%;
                }
            }
        }
    }
    .fodong{
        position: fixed;
        right:0px;
        top: 40%;
        .btn1{
            display: inline-block;
            width: 65px;
            img{
                width: 100%;
            }
        }
        .btn2{
            width: 65px;
            height: 174px;
            background-color: #385690;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-around;
            border-top-left-radius: 15px;
            border-bottom-left-radius: 15px;
            a{
                width: 60%;
                display: block;
                img{
                    width: 100%;
                }
                &:nth-child(2){
                    cursor: pointer;
                }
                &:nth-child(3){
                    cursor: pointer;
                }
            }
        }
    }
    .news-detail{
        width: 100%;
        margin-top: 20px;
        .news-detail-title{
            font-size: 22px;
            margin: 20px 0;
            line-height: 32px;
        }
        .news-detail-tips{
            font-size: 12px;
            margin-bottom: 20px;
        }
        img{
            width: 100%;
        }
        .news-detail-content{
            margin: 20px 0;
            text-indent: 2em;
            font-size: 14px;
        }
    }
</style>
